<template>
    <el-dialog :title="dialogText" :visible="true" center :lock-scroll="true" :close-on-press-escape="false"
        :close-on-click-modal="false" width="660px" top="40px" :append-to-body="true" @close="cancel">
        <el-form label-width="160px">
            <el-form-item label="证书名称" required>
                <el-input v-model="formData.certificateName" />
            </el-form-item>
  
            <el-form-item label="证书编号生成规则" required>
                <div class="certificateRules-tips">

                    <div> 生成规则： 前缀+ 规则 + 预计最大位数。
                    </div>
                    <div> 例如： 前缀(PM-), 规则：(年) 最大位数：4。
                    </div>
                    <div> 证书编号【PM-20240001】【PM-20249999】。
                    </div>
                </div>

                <div class="certificateRules">
                    <div class="certificateRules-column certificateRules-1">
                        <div class="certificateRules-label">前缀：</div>
                        <el-input v-model="formData.certificateRules[0]" class="certificateRules-1__input" />
                    </div>
                    <div class="certificateRules-column">
                        <div class="certificateRules-label">规则： </div>
                        <el-select v-model="formData.certificateRules[1]">
                            <el-option v-for="item in certificateConfigList" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="certificateRules-column">
                        <div class="certificateRules-label"> 最大位数：
                        </div>
                        <el-input-number v-model="formData.certificateRules[2]" :min="2" :max="6"></el-input-number>
                    </div>
                </div>
            </el-form-item>

        </el-form>
        <span slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">保存模板</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { certificateConfigList } from "../../utils/certificate";

export default {

    data() {
        return {
            certificateConfigList,
            formData: {
                certificateName: "",
                certificateRules: [
                    'PM-',
                    'yyyy',
                    4
                ],

            },
            dialogVisibleType: "add"
        }
    },

    computed: {
        dialogText() {
            if (this.dialogVisibleType === "add") {
                return "新建模板"
            } else {
                return "编辑模板"

            }
        },
    },


    methods: {

        init(type, row) {
            this.dialogVisibleType = type;
            if (type === "edit") {
                this.formData = {
                    ...this.formData,
                    ...row,
                };
            }

        },


        async handleSubmit() {


            const { certificateName, backgroundImageUrl, certificateRules } = this.formData;

            const rules = [
                {
                    case: !certificateName,
                    message: "请输入证书名称",
                },

                {
                    case: !certificateRules[0],
                    message: "请设置证书编号前缀",
                },
                {
                    case: !certificateRules[1],
                    message: "请设置证书编号规则",
                },
                {
                    case: !certificateRules[2],
                    message: "请设置证书编号最大位数",
                },
            ]

            const valid = this.$validForm(rules)

            if (!valid) {
                return
            }

            const url = this.dialogVisibleType === "edit" ? `/api/certificate-config/update` : "/api/certificate-config/create"
            const res = await this.$fetch.post(url, {
                ...this.formData,
                certificateRules: JSON.stringify(certificateRules)
            });

            if (res.code === 0) {
                this.$message.success("添加证书成功");
                this.cancel();

            }
        },

        cancel() {
            this.$emit("update:visible", false);
            this.$emit("refresh")
        },

    }
}
</script>



<style lang="less" scoped>
.certificateRules-tips {
    color: #F56C6C;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
}


.certificateRules {
    display: flex;
    flex-direction: column;

    .certificateRules-label {
        width: 120px;
        text-align: left;
    }


    .certificateRules-column {
        display: flex;
        flex-direction: row;
        margin-bottom: 6px;
    }


    .certificateRules-1 {

        .certificateRules-1__input {
            width: 200px;
        }
    }


}

::v-deep .preview-image {
    width: 360px;
}
</style>